<template>
   <div class="container">
        <!-- 顶部区域 -->
        <div class="header">
            <div class="app-info">
                <h1 class="page-title">我的诗韵</h1>
            </div>
        </div>
        
        <!-- 用户信息区域 -->
        <div class="user-section scroll-effect">
            <div class="seal">诗友</div>
            
            <div class="user-profile">
                <div class="user-avatar">
                    <span>诗</span>
                </div>
                <div class="user-info">
                    <div class="user-name">墨香居士</div>
                    <div class="user-bio">腹有诗书气自华，读书万卷始通神</div>
                </div>
                <button class="edit-btn">编辑资料</button>
            </div>
            
            <div class="stats-section">
                <div class="stat-item">
                    <div class="stat-number">128</div>
                    <div class="stat-label">收藏</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">42</div>
                    <div class="stat-label">创作</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">365</div>
                    <div class="stat-label">阅读</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">7</div>
                    <div class="stat-label">勋章</div>
                </div>
            </div>
        </div>
        
        <!-- 广告区域 - 用户信息下方 -->
        <div class="ad-section">
            <div class="ad-card">
                <div class="ad-badge">推荐</div>
                <div class="ad-close">×</div>
                <div class="ad-content">
                    <div class="ad-image">古典文学<br>精品课程</div>
                    <div class="ad-text">
                        <div class="ad-title">唐诗宋词精讲课程</div>
                        <div class="ad-desc">名师讲解，深入理解古典诗词的意境与美学</div>
                        <button class="ad-button">了解详情</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 功能列表 -->
        <div class="menu-section">
            <div class="menu-title">我的内容</div>
            <div class="menu-list">
                <div class="menu-item">
                    <div class="menu-icon">📚</div>
                    <div class="menu-content">
                        <div class="menu-name">我的收藏</div>
                        <div class="menu-desc">查看已收藏的诗词和文章</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">📖</div>
                    <div class="menu-content">
                        <div class="menu-name">阅读历史</div>
                        <div class="menu-desc">浏览曾经读过的诗词</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">✍️</div>
                    <div class="menu-content">
                        <div class="menu-name">我的创作</div>
                        <div class="menu-desc">查看自己创作的诗词作品</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </div>
            </div>
            
            <div class="menu-title">应用设置</div>
            <div class="menu-list">
                <div class="menu-item">
                    <div class="menu-icon">🎵</div>
                    <div class="menu-content">
                        <div class="menu-name">朗读设置</div>
                        <div class="menu-desc">调整语音朗读偏好</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">🎨</div>
                    <div class="menu-content">
                        <div class="menu-name">主题设置</div>
                        <div class="menu-desc">切换应用主题风格</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">🔔</div>
                    <div class="menu-content">
                        <div class="menu-name">通知设置</div>
                        <div class="menu-desc">管理推送通知偏好</div>
                    </div>
                    <div class="menu-arrow">›</div>
                </div>
            </div>
        </div>
        
        <!-- 底部广告区域 -->
        <div class="ad-large">
            <div class="ad-large-badge">限时优惠</div>
            <div class="ad-close">×</div>
            <div class="ad-large-title">诗韵雅集会员专享</div>
            <div class="ad-large-desc">解锁所有诗词解析、名家朗读和独家内容</div>
            <div class="ad-large-image">会员专属特权</div>
            <button class="ad-large-button">立即开通</button>
        </div>
        
        <!-- 底部导航 -->
        <!-- <div class="bottom-nav">
            <div class="nav-item">首页</div>
            <div class="nav-item">品鉴</div>
            <div class="nav-item">收藏</div>
            <div class="nav-item active">我的</div>
        </div> -->
    </div>

</template>

<script>
	
</script>

    <style scoped lang="scss">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Serif SC', serif;
            background: linear-gradient(to bottom, #f9f6ec, #e8dfce);
            color: #5c4f35;
            line-height: 1.6;
            padding: 0;
            margin: 0;
            min-height: 100vh;
        }
        
        .container {
            max-width: 414px;
            margin: 0 auto;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><rect fill="%238e7d5b" width="100" height="100"/></svg>') repeat;
            min-height: 100vh;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 顶部区域 */
        .header {
            background: linear-gradient(135deg, #6d5c43 0%, #8e7d5b 50%, #a39272 100%);
            color: white;
            padding: 25px 15px 15px;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
            min-height: 180px;
        }
        
        /* 水墨山背景 */
        .header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M0,70 C50,30 80,50 120,40 C160,30 180,50 200,60 L200,100 L0,100 Z" fill="rgba(0,0,0,0.1)"/></svg>') bottom left/60% 40% no-repeat,
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M0,80 C30,50 70,60 100,50 C140,40 160,60 200,70 L200,100 L0,100 Z" fill="rgba(0,0,0,0.15)"/></svg>') bottom left/80% 50% no-repeat,
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M0,90 C40,60 80,70 120,60 C150,50 170,70 200,80 L200,100 L0,100 Z" fill="rgba(0,0,0,0.2)"/></svg>') bottom left/100% 60% no-repeat;
            z-index: 1;
            opacity: 0.7;
        }
        
        .header::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" preserveAspectRatio="none"><path d="M0,0 C40,20 60,20 100,0 L100,20 L0,20 Z" fill="%23f9f6ec"/></svg>') center bottom / 100% 100% no-repeat;
            z-index: 2;
        }
        
        .app-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            position: relative;
            z-index: 3;
        }
        
        .page-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 28px;
            letter-spacing: 3px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            margin-left: 15px;
        }
        
        /* 用户信息区域 */
        .user-section {
            padding: 20px 15px;
            margin: 20px 15px;
            background: white;
            border-radius: 18px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
            position: relative;
            z-index: 3;
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e8e1d0, #c4b28d);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border: 3px solid white;
            position: relative;
            overflow: hidden;
        }
        
        .user-avatar::after {
            content: "";
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 1px solid #c4b28d;
            opacity: 0.3;
        }
        
        .user-avatar span {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 30px;
            color: #5c4f35;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-size: 22px;
            font-weight: bold;
            color: #5c4f35;
            margin-bottom: 5px;
        }
        
        .user-bio {
            font-size: 14px;
            color: #8e7d5b;
            font-style: italic;
        }
        
        .edit-btn {
            background: linear-gradient(to right, #8e7d5b, #a39272);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .edit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 数据统计 */
        .stats-section {
            display: flex;
            justify-content: space-around;
            margin: 25px 0;
            padding: 15px 0;
            border-top: 1px solid #e8e1d0;
            border-bottom: 1px solid #e8e1d0;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #8e7d5b;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            color: #6e6147;
        }
        
        /* 广告区域 - 用户信息下方 */
        .ad-section {
            margin: 20px 15px;
            position: relative;
        }
        
        .ad-card {
            background: linear-gradient(to right, #f8f4e9, #f1ead8);
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #e8e1d0;
            position: relative;
            overflow: hidden;
        }
        
        .ad-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #8e7d5b;
            color: white;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 10px;
        }
        
        .ad-content {
            display: flex;
            align-items: center;
        }
        
        .ad-image {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #d4c5a8, #a39272);
            border-radius: 10px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            text-align: center;
            padding: 5px;
        }
        
        .ad-text {
            flex: 1;
        }
        
        .ad-title {
            font-size: 16px;
            font-weight: bold;
            color: #5c4f35;
            margin-bottom: 5px;
        }
        
        .ad-desc {
            font-size: 13px;
            color: #8e7d5b;
            margin-bottom: 8px;
        }
        
        .ad-button {
            background: #8e7d5b;
            color: white;
            border: none;
            border-radius: 15px;
            padding: 5px 12px;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 功能列表 */
        .menu-section {
            margin: 0 15px;
        }
        
        .menu-title {
            font-size: 18px;
            color: #7a6a51;
            margin: 20px 0 15px;
            padding-left: 10px;
            border-left: 4px solid #7a6a51;
            font-weight: bold;
        }
        
        .menu-list {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 18px 20px;
            border-bottom: 1px solid #f3efe5;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-item:hover {
            background: #faf8f1;
        }
        
        .menu-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f3efe5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 20px;
            color: #8e7d5b;
        }
        
        .menu-content {
            flex: 1;
        }
        
        .menu-name {
            font-size: 16px;
            color: #5c4f35;
            margin-bottom: 4px;
        }
        
        .menu-desc {
            font-size: 13px;
            color: #8e7d5b;
        }
        
        .menu-arrow {
            color: #c4b28d;
            font-size: 18px;
        }
        
        /* 底部广告区域 */
        .ad-large {
            margin: 25px 15px;
            background: linear-gradient(to right, #f8f4e9, #f1ead8);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e8e1d0;
            text-align: center;
            position: relative;
        }
        
        .ad-large-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #8e7d5b;
            color: white;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 10px;
        }
        
        .ad-large-title {
            font-size: 18px;
            font-weight: bold;
            color: #5c4f35;
            margin-bottom: 10px;
        }
        
        .ad-large-desc {
            font-size: 14px;
            color: #8e7d5b;
            margin-bottom: 15px;
        }
        
        .ad-large-image {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, #d4c5a8, #a39272);
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .ad-large-button {
            background: #8e7d5b;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 414px;
            display: flex;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            overflow: hidden;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(142, 125, 91, 0.1);
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 16px 0;
            font-size: 14px;
            color: #a89a7a;
            position: relative;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .nav-item.active {
            color: #7a6a51;
            font-weight: bold;
        }
        
        .nav-item.active::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 3px;
            background: linear-gradient(to right, #c4b28d, #8e7d5b);
            border-radius: 0 0 3px 3px;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .user-section, .menu-item, .ad-card, .ad-large {
            animation: fadeIn 0.5s ease-out;
        }
        
        /* 响应式调整 */
        @media (max-width: 360px) {
            .page-title {
                font-size: 24px;
            }
            
            .user-avatar {
                width: 70px;
                height: 70px;
            }
            
            .user-name {
                font-size: 20px;
            }
            
            .stat-number {
                font-size: 20px;
            }
            
            .ad-image {
                width: 70px;
                height: 70px;
            }
        }
        
        /* 诗词印章效果 */
        .seal {
            position: absolute;
            top: -15px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #8e7d5b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 14px;
            transform: rotate(15deg);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        /* 卷轴效果 */
        .scroll-effect {
            position: relative;
        }
        
        .scroll-effect::before, .scroll-effect::after {
            content: "";
            position: absolute;
            height: 15px;
            left: 10px;
            right: 10px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,0 C30,15 70,15 100,0 L100,15 L0,15 Z" fill="%23e8e1d0"/></svg>') center top / 100% 100% no-repeat;
        }
        
        .scroll-effect::before {
            top: -10px;
        }
        
        .scroll-effect::after {
            bottom: -10px;
            transform: rotate(180deg);
        }
        
        /* 关闭广告按钮 */
        .ad-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #8e7d5b;
            font-size: 14px;
            cursor: pointer;
        }
    </style>